<template>
    <div class="createPost-container">
        <el-form class="form-container" style="width:600px; margin-top:20px">
            <div class="createPost-main-container">
                <el-form-item style="margin-bottom: 40px;" label-width="90px" label="用户名:">
                    <el-input v-model="user.username" :rows="1" class="article-textarea" autosize placeholder="请输入用户名" style="width:400px" readonly />
                    <el-button type="primary" style="margin-left:10px" @click="modifyUsername()">修改</el-button>
                </el-form-item>
                <el-form-item style="margin-bottom: 40px;" label-width="90px" label="密码:">
                    <el-input value="******" type="password" :rows="1" class="article-textarea" autosize placeholder="请输入密码" style="width:400px" readonly />
                    <el-button type="primary" style="margin-left:10px" @click="modifyPassword()">修改</el-button>
                </el-form-item>
            </div>
        </el-form>

        <el-dialog :title="$t('编辑用户名')" :visible.sync="dialogUsernameVisible">
            <el-form ref="username_form" :rules="rules_username" :model="temp_username" label-position="left" label-width="70px" style="width: 400px; margin-left: 50px">
                <el-form-item :label="$t('新用户名')" prop="username">
                    <el-input v-model="temp_username.username" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUsernameVisible = false">
                    {{ $t("table.cancel") }}
                </el-button>
                <el-button type="primary" @click="updateUsername()">
                    {{ $t("table.confirm") }}
                </el-button>
            </div>
        </el-dialog>

        <el-dialog :title="$t('修改密码')" :visible.sync="dialogPasswordVisible">
            <el-form ref="password_form" :rules="rules_password" :model="temp_password" label-position="left" label-width="70px" style="width: 400px; margin-left: 50px">
                <el-form-item :label="$t('新用户密码')" label-width="120px" prop="password">
                    <el-input v-model="temp_password.password" type="password" />
                </el-form-item>
                <el-form-item :label="$t('新用户确认密码')" label-width="120px" prop="password_confirm">
                    <el-input v-model="temp_password.password_confirm" type="password" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogPasswordVisible = false">
                    {{ $t("table.cancel") }}
                </el-button>
                <el-button type="primary" @click="updatePassword()">
                    {{ $t("table.confirm") }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
  <script>
import { fetch } from '@/ucenter/api/user'
import { update as updateUsername } from '@/ucenter/api/username'
import { update as updatePassword } from '@/ucenter/api/password'

export default {
    props: {
        uid: {
            type: Number,
            default: 0
        }
    },
    watch: {
        uid(newV, oldV) {
            this.getData()
        }
    },
    data() {
        const validateRequire = (rule, value, callback) => {
            if (value === '') {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            user: {},
            dialogUsernameVisible: false,
            temp_username: {
                username: ''
            },
            rules_username: {
                username: [{ validator: validateRequire, message: '新用户名为必填字段', trigger: 'blur' }]
            },
            dialogPasswordVisible: false,
            temp_password: {
                password: '',
                password_confirm: ''
            },
            rules_password: {
                password: [{ validator: validateRequire, message: '新用户密码为必填字段', trigger: 'blur' }],
                password_confirm: [{ validator: validateRequire, message: '新用户确认密码为必填字段', trigger: 'blur' }]
            },
            loading: false,
            tempRoute: {}
        }
    },
    computed: {

    },
    created() {
        if (this.uid > 0) {
            this.getData()
        }
    },
    methods: {
        getData() {
            fetch({ uid: this.uid }).then((response) => {
                this.user = response.data

                // Just to simulate the time of the request
                setTimeout(() => {
                    this.loading = false
                }, 50)
            })
        },
        modifyUsername() {
            this.temp_username.username = this.user.username
            this.dialogUsernameVisible = true
        },
        updateUsername() {
            this.$refs.username_form.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = this.temp_username
                    data.uid = this.uid
                    updateUsername(data).then(response => {
                        this.$notify({
                            title: '成功',
                            message: '修改账户用户名成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.dialogUsernameVisible = false
                        this.user.username = this.temp_username.username
                        this.loading = false
                        // this.$router.push('/goods/index')
                    }).catch(err => {
                        console.log(err)
                        this.loading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        modifyPassword() {
            this.temp_password.password = ''
            this.temp_password.password_confirm = ''
            this.dialogPasswordVisible = true
        },
        updatePassword() {
            this.$refs.password_form.validate(valid => {
                if (valid) {
                    if (this.temp_password.password !== this.temp_password.password_confirm) {
                        this.$notify({
                            title: '修改失败',
                            message: '两次填写密码不一致！',
                            type: 'error',
                            duration: 2000
                        })
                    } else {
                        this.loading = true
                        const data = this.temp_password
                        data.uid = this.uid
                        updatePassword(data).then(response => {
                            this.$notify({
                                title: '成功',
                                message: '修改账户密码成功',
                                type: 'success',
                                duration: 2000
                            })
                            this.dialogPasswordVisible = false
                            this.loading = false
                            // this.$router.push('/goods/index')
                        }).catch(err => {
                            console.log(err)
                            this.loading = false
                        })
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
  </script>
  